import React, { useState } from 'react';
import './index.css';
import Model from '..';
import ReactECharts from 'echarts-for-react';
import { formateTodayDay, getPieOption, getLineOption } from '../../../libs/util';

function TodoChartModel(props) {
    const { isShowTodoChartModel, data, closetodoModel, title } = props,
          [showPieOrLine, setshowPieOrLine] = useState(true),
          [showNotic, setShowNotice] = useState(true);
    //初始化data
    //统计完成与为未完成的数据量
    const comData = data.filter(item => item.completed === false).length;
    const incData = data.filter(item => item.completed === true).length;
    // 初始化数据
    const yData = {
        'mon': 0,
        'tue': 0,
        'wed': 0,
        'thu': 0,
        'fri': 0,
        'sat': 0,
        'sun': 0
    }
    //处理初始数据
    const tdata = data.map(item => {
        return formateTodayDay(item.id);
    });
    //遍历tdata为yData填充数据
    tdata.forEach(e => {
        // eslint-disable-next-line default-case
        switch (e) {
            case 'Mon':
                yData.mon += 1;
                break;
            case 'Tue':
                yData.tue += 1;
                break;
            case 'Wed':
                yData.wed += 1;
                break;
            case 'Thu':
                yData.thu += 1;
                break;
            case 'Fri':
                yData.fri += 1;
                break;
            case 'Sat':
                yData.sat += 1;
                break;
            case 'Sun':
                yData.sun += 1;
                break;
            default:
                console.log('formatdata error');
                break;

        }
    });
    return (
        <Model
            isModelShow={isShowTodoChartModel}
            modelTitle='事件统计'
        >
            <div onClick={() => setshowPieOrLine(!showPieOrLine)}>
                <svg t="1627634118140" className="icon-change" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1210" width="32" height="32"><path d="M618.688 149.312l0 213.376L64 362.688 64 448l896 0L618.688 149.312zM405.312 874.688l0-213.376L960 661.312 960 576 64 576 405.312 874.688z" p-id="1211" fill="#ffffff"></path></svg>
            </div>
            {
                showNotic
                    ?
                    (
                        <div className="notification is-warning my-notic-text">
                            <button className="delete" onClick={ () => setShowNotice(false) }></button>
                            注意: 图表<strong>展示</strong>本周、今日或搜索的数据。请于适当的时机删除不重要记录。
                        </div>
                    )
                    :
                    ''
            }
            {
                showPieOrLine
                    ?
                    (
                        <div id="main" style={{ width: '16rem', height: '14rem' }}>
                            <ReactECharts 
                            option={getPieOption(incData, comData, title)}
                            />

                        </div>
                    )
                    :
                    (
                        <div id="main" style={{ width: '16rem', height: '16rem' }}>
                            <ReactECharts
                            option={getLineOption(yData, title)}
                            />

                        </div>
                    )

            }


            <button
                className="button is-success my-close-btn"
                onClick={closetodoModel}
            >确定</button>
        </Model>
    );
}

export default TodoChartModel;